    <template>
    <div class="mod-order" style="margin: 10px">
        <!--查询面板-->
        <SearchPanel ref="searchPanel" :search-config="searchConfig" :isShowQueryBtn="false">
            <el-form-item>
                <el-button icon="el-icon-plus" type="primary" size="mini" @click="add">新增</el-button>
            </el-form-item>
             <el-form-item>
                <el-button  type="danger" size="mini" @click="batchDel" :disabled="selectDataList.length==0">批量删除</el-button>
            </el-form-item>
        </SearchPanel>

        <!-- 查询结果 -->
        <ResultListPanel
            tableRef="table"
            ref="multipleTable"
            :checkBoxEnable="true"
            :data="dataList?dataList:[]"
            :listConfig="resultColConfig"
            :listLoading="listLoading"
            @actionClick="actionClick"
            @paginationChange="paginationChange"
            @selectionChange="selectionChange"

        ></ResultListPanel>
    <addOrUpdate ref="addOrUpdateDom" @refreshDataList="getList" v-show="visible"/>
    </div>
</template>
      

    
    <script>
import {INDEX_SEARCH_RESULT_ITEMS } from './config';
import ResultListPanel from '../../components/ResultListPanel';
import SearchPanel from '../../components/SearchPanel';
import API from '@/api';
import cloneDeep from 'lodash/cloneDeep';
import addOrUpdate from './add-or-update'
export default {
    components: {
        ResultListPanel,
        SearchPanel,
        addOrUpdate
    },
    data() {
        var appidValdate = (rule, value, callback) => {
            var regex = /^[0-9a-zA-Z]{3,8}$/g;
            if (!regex.test(value)) {
                callback(new Error('请输入正确的appid'));
            } else {
                callback();
            }
        };
        return {
           visible:false,
            selectDataList:[],
             // 搜索项配置
            searchConfig: [],
            resultColConfig: INDEX_SEARCH_RESULT_ITEMS,
            listLoading: false, // 数据列表显示状态
            dataList: [], //  数据列表
            /* 分页查询数据 */
            pageSize: 10,
            pageNum: 1,
            totalPage: 0,
            /* 查询条件参数 */
            dataForm: {
            },
            type: 1
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        selectionChange (val){
            this.selectDataList = val
        },
        /***
         * 触发 行操作按钮
         * @param data
         * @param item
         */
        actionClick([data, item]) {
            if (item.alias === 'edit') {
                this.Edit(data);
            } else if (item.alias === 'del') {
                this.sigleDel(data);
            }
        },
        add() {
           this.visible = true
            this.$refs.addOrUpdateDom.init(null,this.$route.query.appId,this.$route.query.pageId)
        },
     
    
        /**
         * 分页器发生改变
         * @param page
         */
        paginationChange(page) {
            this.pageSize = page.pageSize;
            this.pageNum = page.pageNo;
            this.getList();
        },
        /***
         * 搜索面板出发搜索事件
         * @param params
         */
        startSearch(params) {
            this.dataForm = params;
            this.pageNum = 1;
            this.$set(this.$refs.multipleTable['pageParams'], 'pageNum', 1);
            this.getList();
        },
         // 单独删除
        sigleDel(row) {
            console.log(row);
            this.$alert('您确定要删除该条数据吗?', '', {
                confirmButtonText: '确定',
                callback: action => {
                    API.menu.siginAppDelList({ id: row.id }).then(res => {
                        if (res.httpCode == 200) {
                            this.$message({
                                type: 'success',
                                message: `删除成功`
                            });
                            this.getList();
                        }
                    });
                }
            });
        },
        // 批量删除
        batchDel(row) {
            console.log(this.selectDataList)
            var ids = []
            this.selectDataList.forEach((item,index)=>{
                return ids.push(item.id)
            })
            this.$alert('您确定要删除该数据吗?', '', {
                confirmButtonText: '确定',
                callback: action => {
                    API.menu.batchAppDelList(ids).then(res => {
                        if (res.code == 20000000) {
                            this.$message({
                                type: 'success',
                                message: `批量删除成功`
                            });
                            this.getList();
                        }
                    });
                }
            });
        },
        // 编辑
        Edit(data) {
              this.visible = true
              API.menu.getEditAppDetail({id:data.id}).then(res=>{
                  if (res.code == 20000000) {
                       this.$refs.addOrUpdateDom.init(res.data)
                  }
              })
        },
        getList() {
            let params = cloneDeep(this.dataForm);
            params.pageNum = this.pageNum;
            params.pageSize = this.pageSize;
            this.listLoading = true;
            API.menu.getFunctionClassifyList(params).then(res => {
                 this.listLoading = false
                this.totalPage = res.data.total;
                this.dataList = res.data.rows;
                this.$set(this.$refs.multipleTable['pageParams'], 'total', res.data.total);
            });
        }
    }
};
</script>
    
    <style>
</style>